const canvas=document.getElementsByClassName('canvas')[0];//获取canvas
const app=document.getElementsByClassName('app')[0];
const b=app.getElementsByTagName('b');//显示时间和分数0/1
const press=app.getElementsByClassName('press')[0];
const span=press.getElementsByTagName('span');////对应上下左右
const ctx=canvas.getContext('2d');
/**
 * 这周先安排你做一个小作业吧，主要是看下你对canvas动画的熟悉程度：
1.了解requestAnimationFrame，并使用requestAnimationFrame完成下面的任务：
2.将面试题目的最后一题增加如下功能：
在一个300*300的区域内画一个50*50的矩形
矩形开始在左上方，可以用键盘上下左右控制矩形移动（不能超过300*300的范围），速度为100像素/s
在区域内随机位置生成一个半径为5的小红点，5秒后消失
当矩形接触到小红点时，小红点消失
小红点消失后，立即生成下一个小红点
记录30s内一共吃到了多少小红点
 */
//通过点击canvas启动这个动画；
//起始坐标
let x=0;
let y=0;
let countDown=30;//倒计时30秒
let score=0;//初始分数为零；
    //最小浏览器渲染间隔一秒钟60次，题目中一秒中移动100个相素；
    // 一秒钟是六十次 100/60 是每次移动的距离；
let once=false;//需要一个变量，判读现在是不是执行状态，如果是执行状态，点击事件不生效
let distance=100/60;//
//红色点参数
let x_r=0;//小红点位置
let y_r=0;
//初始位置；是随机的位置；；
x_r=Math.floor(Math.random()*295);
y_r=Math.floor(Math.random()*295);

let time_s=5000;//5秒
var timer_r;//小红点定时器；


//上下左右移动的公共变量
let publicOrder=60;//表示一秒//60次
//四个定时器，保持均匀的速度运行；
let time_upDown;
let time_down;
let time_left;
let time_right;
let state=false;//当前的运行状态，键盘按下的时候变为true,抬起的时候变为false。只有false的时候方向定时器才会生效；
//这里的x，y是需要被改动的；
function start(){
    ctx.font = "50px serif";
    ctx.fillText('开始',100,150);
	
}
start()//初始状态；
b[0].innerText=`时间：${countDown}`;
b[2].innerText=`得分：${score}`;
let under='进行中';
//点击启动】
//每一秒减一，当减到零时结束，期间canvas的点击事件，只生效一次，只有当countDown等于30时才会执行后面的；
let callback=window.requestAnimationFrame;//引用         ；测得在谷歌中每秒是120次

canvas.onclick=function(){
    
    if(once===false){
	    score=0;//启动的时候重置分数；
		b[2].innerText=`得分：${score}`;
		b[1].innerText='进行中';
		under='进行中';
        Gartoon();
        once=true;//一旦执行变为true
        x=0;y=0;//初始状态，状态清零；
        //执行函数动画
		callback(Gartoon);
		//span上下左右添加事件；
		span[0].addEventListener('mousedown',upDown,false);
		span[1].addEventListener('mousedown',down,false);
		span[2].addEventListener('mousedown',left,false);
		span[3].addEventListener('mousedown',right,false);
		//
		span[0].addEventListener('touchstart',upDown,false);
		span[1].addEventListener('touchstart',down,false);
		span[2].addEventListener('touchstart',left,false);
		span[3].addEventListener('touchstart',right,false);
		
        //时间定时器
        var timer=setInterval(()=>{
            countDown--;
            if(countDown<=0){
				//清除计时定时器
                clearInterval(timer);
                once=false;//30秒已到恢复点击；
				//时间到了清除键盘事件；
				clear_keyDown();
				clear_keyup();
				//还要清除所有的方向定时器
				clear_time_upDown();
				clear_time_down();
				clear_time_left();
				clear_time_right();
				//清除小红点定时器
				clearInterval(timer_r);
				//清除上下左右span上的事件
				span[0].removeEventListener('mousedown',upDown,false);
				span[1].removeEventListener('mousedown',down,false);
				span[2].removeEventListener('mousedown',left,false);
				span[3].removeEventListener('mousedown',right,false);
				//
				span[0].removeEventListener('touchstart',upDown,false);
				span[1].removeEventListener('touchstart',down,false);
				span[2].removeEventListener('touchstart',left,false);
				span[3].removeEventListener('touchstart',right,false);
				//提示
				under='点击画布可重新开始';
				b[1].innerText=`${under}`;
				//绘制提示
				ctx.font = "50px serif";
				ctx.fillText(`得分${score}`,100,100);
				ctx.font = "20px serif";
				ctx.fillText(`点击重新开始`,90,150);
            };
            b[0].innerText=`时间：${countDown}`;
        },1000);
        //键盘事件,启动的时候window赋值
        keyDown();
        keyup();
        //随机小红点。每5秒生成一个
        timer_r=setInterval(()=>{
            x_r=Math.floor(Math.random()*295);
            y_r=Math.floor(Math.random()*295);
        },time_s);
    }
    return;
}
//应采用键盘按下事件和抬起事件组合。。//应该是安下就移动，抬起就停止；如何做到/键盘一抬起就清除按下事件，移动过程不做时间限制，按下生效‘
//上下左右//按下；
function keyDown(){
	window.onkeydown=function(e){
        let  keyCode=e.keyCode;
        // console.log(keyCode);
        switch(keyCode){
            //小键盘上下左右
            case 38://上
                upDown();
                break;
            case 40://下
                down();
                break; 
            case 37://左
                left();
                break; 
            case 39://右
                right();
                break;   
            //w s a d键作用和小键盘上下左右一样
            case 87://上
                upDown()
                break;
            case 83://下
                down();
                break; 
            case 68://左
                left();
                break; 
            case 65://右
                right();
                break;   
        }
	}
}
//键盘抬起；抬起的·时候清除方向定时器，设置运动状态为false;
function keyup(){
	window.onkeyup=function(e){
	    let  keyCode=e.keyCode;
		// clear_time_upDown();
		// clear_time_down();
		// clear_time_left();
		// clear_time_right();
		state=false;
	    switch(keyCode){
	        //小键盘上下左右
	        case 38://上
				clear_time_upDown();
	            break;
	        case 40://下
			    clear_time_down();
	            break; 
	        case 37://左
			    clear_time_left();
	            break; 
	        case 39://右
			    clear_time_right();
	            break;   
	        //w s a d键作用和小键盘上下左右一样
	        case 87://上
			    clear_time_upDown();
	            break;
	        case 83://下
			    clear_time_down();
	            break; 
	        case 68://左
			    clear_time_left();
	            break; 
	        case 65://右
			    clear_time_right();
	            break;   
	    }
	}
}
//当时间到的时候清除键盘事件
function clear_keyDown(){
	window.onkeydown=null;
}
function clear_keyup(){
	window.onkeyup=null;
}
//如果只有一个动画函数，每次只更该方向，和时间；

//动画函数 绘制矩形的函数；
function Gartoon(){
    //判断越界，矩行是50*50的大小，在300的画布里最大移动距离为250即可；
    if(x>250) x=250;
    if(x<0) x=0;
    if(y>250) y=250;
    if(y<0) y=0;
    //清空画布
    ctx.clearRect(0,0,canvas.width,canvas.height);
  
	
	//绘制正方形
    ctx.fillStyle='rgb(255,255,255)';
    ctx.fillRect(x,y,50,50);
	//绘制提示
	ctx.font = "50px serif";//时间
	ctx.fillStyle='aqua';
	ctx.fillText(`${countDown}`,125,125);
	ctx.fillStyle='black'//状态
	ctx.font = "20px serif";
	ctx.fillText(`${under}`,20,20);
	ctx.fillText(`${score}`,260,20);
	//绘制小红点
	random();
	if(countDown<=0){
		countDown=30;//重新恢复时间；
		once=false;//30秒已到恢复点击；
		b[0].innerText=`时间：${countDown}`;
		return;
	}
	//判断触碰
	touch();
	
    //回调
	callback(Gartoon);
}
//判断是否触碰
function touch(){
	//根据x,y轴的位置和x_r，y_r做比较
	//矩形的边长是50，小红点的半径是2.5；
	//随机生成红点，5*5大小；5秒钟之后消失，如果被移动的正方形碰倒，那么消失
	//小红点的x轴在矩形的x轴中；	//小红点的y轴在矩形的y轴中；
	if((x-2.5)<x_r&&x_r<(x+2.5+50)&&(y-2.5)<y_r&&y_r<(y+2.5+50)){
	    //做法，清除小红点，重新生成新的小红点，随机生成x_r,y_r的位置，再次重置定时器
		x_r=Math.floor(Math.random()*295);
		y_r=Math.floor(Math.random()*295);
	    score++;
		b[2].innerText=`得分：${score}`;
	    clearInterval(timer_r);
		timer_r=setInterval(()=>{
		    x_r=Math.floor(Math.random()*295);
		    y_r=Math.floor(Math.random()*295);
		},time_s);
	}
	
}
function random(){
    //x_r,和y_r的位置应在，2.5到297.5之间；半径为2.5；
    //位置判断；
    if(x_r<2.5) x_r=2.5;
    if(y_r<2.5) y_r=2.5;
    if(x_r>297.5) x_r=297.5;
    if(y_r>297.5) y_r=297.5;
    ctx.beginPath(); 
    ctx.arc(x_r,y_r,2.5,0,2*Math.PI,false); 
    ctx.fillStyle="red"; 
    ctx.closePath(); 
    ctx.fill();    
}
//判断函数..判断执行是否结束；
// function judge(){
//     once=true;//一旦执行变为true
//     //判断结束
//     if(countDown<=0){
//         countDown=30;//重新恢复时间；
//         once=false;//30秒已到恢复点击；
//         b[0].innerText=`时间${countDown}`;
//         //绘制得分；
//         ctx.font = "50px serif";
//         ctx.fillText(`得分${score}`,100,100);
//         ctx.font = "50px serif";
//         ctx.fillText(`点击重新开始`,0,150);
//         return false;
//     };
// }
//上下左右，按下之后再，一秒钟之内，朝按下的方向移动100px;此间重复按下无效，
//向上，上行移动 y轴即可；
function upDown(){
    if(state) return;
	state=true;
	time_upDown=setInterval(()=>{
		//赋值
		y-=distance;
		//如果·已经触碰到边界了，直接结束，定时器不在执行
		if(y<0){
		    y=0;
		};
	},1000/60);
}
//下行
function down(){
    if(state) return;
	console.log('动态添加事件');
	state=true;
	time_down=setInterval(()=>{
		//赋值
		y+=distance;
		  //如果·已经触碰到边界了，直接结束，定时器不在执行
		if(y>250){
		    y=250;
		 };
	},1000/60);
}
//左行
function left(){
    if(state) return;
	state=true;
	time_left=setInterval(()=>{
		//赋值
		x-=distance;
		//如果·已经触碰到边界了，直接结束，定时器不在执行
		if(x<0){
		    x=0;
		}		
	},1000/60);
 }
//右行
function right(){
	if(state) return;
	state=true;
	time_right=setInterval(()=>{
		//赋值
		x+=distance;
		//如果·已经触碰到边界了，直接结束，定时器不在执行
		if(x>250){
		   x=250;
		};
	},1000/60);
}
//清除上下左右定时器，重新赋值 state;
//上
function clear_time_upDown(){
	clearInterval(time_upDown);
	state=false;
}
//下
function clear_time_down(){
	clearInterval(time_down);
	state=false;
}
//左
function clear_time_left(){
	clearInterval(time_left);
	state=false;
}
//右
function clear_time_right(){
	clearInterval(time_right);
	state=false;
}